<template>
  <div>
    <el-form
      :inline="true"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="showModal()"
        >添加</el-button
      >
      <el-button
        size="small"
        type="primary"
        v-if="multipleSelection.length != 0"
        @click="changeManyState(1)"
        >批量启用</el-button
      >
      <el-button
        size="small"
        type="primary"
        v-if="multipleSelection.length != 0"
        @click="changeManyState(0)"
        >批量停用</el-button
      >
    </el-form>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" align="center">
      </el-table-column>
      <el-table-column prop="name" label="设备名称" align="center">
      </el-table-column>
      <el-table-column label="图片" align="center" width="100">
        <template slot-scope="scope">
          <el-image
            style="width: 80px; height: 80px; display: block"
            :src="scope.row.pictureUrl"
            lazy
            v-if="scope.row.pictureUrl"
            fit="fit"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? "停用" : "启用" }}
        </template>
      </el-table-column>

      <el-table-column prop="price" label="价格" align="center">
      </el-table-column>
      <el-table-column prop="remark" label="描述" align="center">
      </el-table-column>
      <el-table-column prop="title" label="创建时间" align="center">
        <template slot-scope="scope">
          {{
            scope.row.addTime
              ? new Date(scope.row.addTime).Format("YYYY-MM-DD hh:mm:ss")
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-if="scope.row.status === 1"
            round
            @click="editStatus(scope.row.id, 0)"
            type="danger"
          >
            停用</el-button
          >
          <el-button
            size="mini"
            v-else
            round
            type="success"
            @click="editStatus(scope.row.id, 1)"
          >
            启用</el-button
          >
          <el-button
            size="mini"
            type="primary"
            round
            @click="showCommentVisible(scope.row, true)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" round @click="delete1(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="新增设备"
      :visible.sync="commentVisible"
    >
      <el-form :model="modalData" label-width="140px">
        <el-form-item label="设备名称">
          <el-input
            v-model="modalData.name"
            autocomplete="off"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备图片">
          <el-input
            v-model="modalData.pictureUrl"
            autocomplete="off"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备价格">
          <el-input
            v-model="modalData.price"
            autocomplete="off"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备描述">
          <el-input
            v-model="modalData.remark"
            autocomplete="off"
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="commentVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="submit()"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      modalData: {
        name: "",
        pictureUrl: "",
        price: 0,
        remark: "",
        status: 0,
      },
      tableData: [],
      commentVisible: false,
      multipleSelection: [],
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      },
    };
  },

  beforeMount() {
    this.search();
  },
  methods: {
    //确定搜索条件
    search() {
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      };
      this.getDataList();
    },
    showCommentVisible(data) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getData("adm/classify/details", { id: data.id })
        .then((data) => {
          loading.close();
          this.modalData = data.resData;
          this.commentVisible = true;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    contentChange(data) {
      this.modalData.content = data;
    },
    //获取表格数据
    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        req: {},
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData("adm/classify/pageList", params)
        .then((data) => {
          loading.close();
          this.tableData = data.resData?.data || [];
          this.pageInfo.total = data.resData?.count || 0;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },

    delete1(item) {
      this.$confirm(`确认删除该公告吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$ajax
            .getData("adm/classify/delete", { id: item.id })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    showModal() {
      this.modalData = {
        name: "",
        pictureUrl: "",
        price: 0,
        remark: "",
        status: 0,
      };
      this.commentVisible = true;
    },
    submit() {
      let params = { ...this.modalData };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .postData(
          params.id ? "adm/classify/update" : "adm/classify/save",
          params
        )
        .then((data) => {
          loading.close();
          this.$message({
            type: "success",
            message: params.id ? "修改成功" : "提交成功",
          });
          this.commentVisible = false;
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    handleSelectionChange(data) {
      // console.log(data);
      this.multipleSelection = data;
    },
    changeManyState(status) {
      let ids = [];
      this.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      this.editStatus(ids, status);
    },
    editStatus(ids, status) {
      if (typeof ids !== "object") {
        ids = [ids];
      }
      if (ids.length === 0) {
        return;
      }
      this.$confirm(`是否确定${status == 1 ? "启用" : "停用"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$ajax
            .postData("adm/classify/delete", {
              ids,
              status,
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: `${status == 1 ? "启用" : "停用"}成功!`,
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {});
    },
  },
};
</script>
  <style lang="scss" scoped>
.actionTd {
  button {
    margin-bottom: 10px;
    min-width: 80px;
    margin-left: 5px;
  }
}
.oneComment {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #bbb;
  > * {
    margin: 0 10px;
  }
  .main {
    flex: 1;

    line-height: 2;
  }
}
</style>